<template>
    <div class="image-viewer" :class="viewerClass">
        <div class="extend-info-container d-flex flex-column">
            <div class="tool-bar p-2 text-right">
                <label v-show="!fixedExtend">
                    <i class="material-icons btn text-white btn-sm" data-toggle="tooltip" data-placement="top" title="嵌入" v-tooltip key="pin-extend-area">lock_open</i>
                    <input type="checkbox" v-model="fixedExtend" v-show="false">
                </label>
                <label v-show="fixedExtend">
                    <i class="material-icons btn text-gray-dark btn-sm" data-toggle="tooltip" data-placement="top" title="使浮动" v-tooltip key="unpin-extend-area">lock</i>
                    <input type="checkbox" v-model="fixedExtend" v-show="false">
                </label>
                <label>
                    <i class="material-icons btn text-gray-dark btn-sm" data-toggle="tooltip" data-placement="top" title="关闭" v-tooltip key="pin-extend-area">close</i>
                    <input type="checkbox" v-model="showExtend" v-show="false">
                </label>
                
            </div>
            <div class="content flex-grow-1">
                <div class="p-2 list">
                    <div class="baseInfo">
                        <div class="card text-left">
                            <div class="align-items-center bg-info card-header d-flex">
                                <span>基本信息</span>
                                <i class="btn btn-sm material-icons ml-auto text-muted" @click="$emit('editBaseInfo', curImage)">edit</i></div>
                            <div class="card-body">
                                <ImagebaseInfo v-if="show && showExtend" :image="curImage"></ImagebaseInfo>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="align-items-center pl-2 pr-2 d-flex">
                        <span>自定义信息</span>
                        <i class="material-icons btn text-success btn-sm ml-auto" data-toggle="tooltip" data-placement="top" title="添加自定义信息" v-tooltip key="pin-extend-area" @click.prevent="$emit('addExtendInfo', curImage)">note_add</i>
                    </div>
                    <hr>
                    <extendInfoList v-if="show && showExtend" :image="curImage" @editExtendInfo="propagation('editExtendInfo', arguments)"></extendInfoList>
                </div>
            </div>
        </div>
        <m-viewer :options="options" :images="images" ref="viewer" @inited="inited" v-show="false" v-if="images.length">
            <img v-for="image in images" :data-original="image.baseInfo.src" :data-id="image._id" :alt="image.baseInfo.name" :key="image._id"/>
        </m-viewer>
        
        <div class="nav-bar-trigger"></div>    
        <div class="m-navbar-container small-thumb">
            <div class="m-navbar" v-if="navbar">
                <div class="item" :class="{active: curIndex == index}" v-for="(image, index) in images" :style="{width: navItemSize + 'px', height: navItemSize + 'px'}" @click="view(index)">
                    <thumb-img :size="navItemSize" :image="image" :key="image._id"></thumb-img>
                </div>
            </div>
        </div>
        <ul class="viewer-extend" v-show="false">
            <li class="viewer-extend-btn viewer-large bg-primary" role="button" data-vm-action="toShowExtend" data-prepend title="显示详细信息">
               <i class="material-icons"> description </i>
            </li>
            <li class="viewer-extend-btn viewer-divider" data-prepend></li>
            <li class="viewer-extend-btn viewer-large" role="button" data-vm-action="resize.auto" data-prepend :class="{active: sizeMode == 'auto'}" title="适合">
               <i class="material-icons"> compare_arrows </i>
            </li>
            <li class="viewer-extend-btn viewer-large" role="button" data-vm-action="resize.contain" data-prepend :class="{active: sizeMode == 'contain'}" title="自适应">
                <i class="material-icons"> aspect_ratio </i>
            </li>
            <li class="viewer-extend-btn viewer-large" role="button" data-vm-action="resize.cover" data-prepend :class="{active: sizeMode == 'cover'}" title="填充">
                <i class="material-icons">all_out</i>
            </li>
            <li class="viewer-extend-btn viewer-large" role="button" data-vm-action="resize.full-width" data-prepend :class="{active: sizeMode == 'full-width'}" title="宽度充满">
                <i class="material-icons"> code </i>
            </li>


            <li class="viewer-extend-btn viewer-large" role="button" data-vm-action="resize.full-height" data-prepend :class="{active: sizeMode == 'full-height'}" title="高度充满">
                <i class="material-icons"> unfold_more </i>
            </li>

            <li class="viewer-extend-btn viewer-divider" data-prepend></li>

            <li class="viewer-extend-btn viewer-large" role="button" data-vm-action="center" title="居中">
                <!-- <v-icon name="align-center"/> -->
                <i class="material-icons"> center_focus_strong </i>
            </li>
            <li class="viewer-extend-btn viewer-large text-warning" role="button" data-vm-action="hide" title="关闭">
                <i class="material-icons"> close </i>
            </li>
        </ul>
       
    </div>
        
</template>

<script>
import Vue from 'vue'
import $ from 'jquery'
import _ from 'lodash'

import 'viewerjs/dist/viewer.css'
import originalViewer from 'v-viewer/src/component'
import Viewer from 'viewerjs'

import Scrollbar from 'smooth-scrollbar'

import thumbImg from './thumb-img'
import extendInfoList from './extend-info-list'
import ImagebaseInfo from './image-baseInfo'

function imagePreload() {
    this.queue = [];
    this.num = 2;
    this.loading = 0;
    this.replace = function(arr) {
        this.queue = arr;
        this.load(this.num - this.loading);
    }
    this.load = function(num) {
        if (!num) {
            return;
        }
        var self = this;
        self.queue.splice(0, num).forEach(x => {
            self.loading++;
            console.log('preload', x);
            var $image = $("<img />");
            $image.attr('src', x).on('load error', function() {
                self.loading--;
                self.load(1);
            })
        })
    }
}


var largeToolBarSize = {
    size: 'large',
    title: 'xx'
}

var mViewer;

void function() {
var superMethods = originalViewer.methods;
mViewer = {
    name: "m-viewer",
    extends: originalViewer,
    methods: {
        createViewer: _.debounce(function() {
            superMethods.createViewer.apply(this, arguments);
        }, 300, { 'maxWait': 1000 })
    }
};

Viewer.setDefaults({
    zIndexInline: 2,
    toolbar: {
        zoomIn: largeToolBarSize,
        zoomOut: largeToolBarSize,
        oneToOne: largeToolBarSize,
        divider1: 1,
        prev: largeToolBarSize,
        play: largeToolBarSize,
        next: largeToolBarSize,
        divider2: 1,
        rotateLeft: largeToolBarSize,
        rotateRight: largeToolBarSize,
        reset: largeToolBarSize,
        divider3: 1,
        flipHorizontal: largeToolBarSize,
        flipVertical: largeToolBarSize,
        divider4: 1,

    }
});

}();

var realSize = function(imageData) {
    return parseInt(imageData.rotate / 90) % 2 ? {
        width: imageData.naturalHeight,
        height: imageData.naturalWidth
    } : {
        width: imageData.naturalWidth,
        height: imageData.naturalHeight
    };
};

var sizeMethods = {
    'auto': function(viewerData, imageData) {
        var contain = sizeMethods.contain(viewerData, imageData);
        return {
            width: contain.width * 0.9,
            height: contain.height * 0.9,
            ratio: contain.ratio * 0.9
        }
    },
    'contain': function(viewerData, imageData) {
        var {width, height} = realSize(imageData);
        var ratio = Math.min(viewerData.width / width, viewerData.height / height);
        return {
            width: width * ratio,
            height: height * ratio,
            ratio: ratio
        }
    },
    'cover': function(viewerData, imageData) {
        var {width, height} = realSize(imageData);
        var ratio = Math.max(viewerData.width / width, viewerData.height / height);
        return {
            width: width * ratio,
            height: height * ratio,
            ratio: ratio
        }
    },
    'full-width': function(viewerData, imageData) {
        var {width, height} = realSize(imageData);
        var ratio = viewerData.width / width;
        return {
            width: width * ratio,
            height: height * ratio,
            ratio: ratio
        }
    },
    'full-height': function(viewerData, imageData) {
        var {width, height} = realSize(imageData);
        var ratio = viewerData.height / height;
        return {
            width: width * ratio,
            height: height * ratio,
            ratio: ratio
        }
    }
}

export default {
    name: 'my-image-viewer',
    components: {
        thumbImg, mViewer, extendInfoList, ImagebaseInfo
    },
    props: {
        images: {
            type: Array,
            required: true
        },
        imageDB: {
            type: Object,
            required: true
        },
        index: {
            type: Number,
            default: 0
        },
        navbar: {
            type: Boolean,
            default: true
        },
        navItemSize: {
            type: Number,
            default: 65
        },
        show: {
            type: Boolean,
            default: true
        },
        preload: {
            type: Number,
            default: 3
        }
    },
    data() {
        var vm = this;
        return {
            curIndex: this.index,
            scrollbarInitPromise: null,
            sizeMode: 'auto',
            state: {
                loaded: false,
                error: false
            },
            initialViewIndex: 0,
            showExtend: false,
            fixedExtend: false,
            preloader: new imagePreload()
        }
    },
    computed: {
        curImage() {
            return this.images ? this.images[this.curIndex] || null : null;
        },
        isExtendInfoFixed() {
            return this.showExtend ? this.fixedExtend : false;
        },
        options() {
            var vm = this;
            return {
                inline: true,
                navbar: false,
                initialViewIndex: this.initialViewIndex,
                transition: false,
                url(image) {
                  var obj = vm.imageDB[image.dataset.id];
                  return obj.baseInfo.src + '?thumb=true';
                },
                title(image) {
                    var baseInfo = vm.images[vm.curIndex].baseInfo;
                    return `${baseInfo.name} (${baseInfo.width} x ${baseInfo.height})`;
                },
                view: vm.startLoad,
                ready() {
                    vm.$nextTick(function() {
                        vm.extendViewer();
                    });
                    
                },
                hide() {
                    vm.$emit('viewerHide')
                }
            }
        },
        viewerClass() {
            return {
                'extend-info-fixed': this.isExtendInfoFixed,
                'extend-info-show': this.showExtend,
                'show': this.show,
                'img-loading': !this.state.error && !this.state.loaded,
                'img-loaded': !this.state.error && this.state.loaded,
                'img-error': this.state.error
            }
        }
    },
    methods: {
        inited(viewer) {
            var vm = this;
            vm.$viewer = viewer;
            console.log('inited viewer', vm.images);
        },
        view: function(index) {
            var vm = this;
            index = Math.min(vm.images.length - 1, index);
            vm.$viewer && vm.$viewer.view(index);
            vm.focusNavBarItem(index);
        },
        focusNavBarItem: function(index, centerize=true) {
            var vm = this, left = (vm.navItemSize + 5) * index;
            var cb = function() {
                if (centerize) {
                    left = left - (vm.$scrollbar.size.container.width - vm.navItemSize) / 2;
                }
                vm.$scrollbar.scrollTo(left, 0, 300);
            }
            if (!vm.scrollbarInitPromise) {
                vm.initScrollBar(cb);
            } else {
                cb();
            }
        },
        initScrollBar(callback) {
            var vm = this;
            if (this.scrollbarInitPromise) {
                return this.scrollbarInitPromise;
            } else {
                return (this.scrollbarInitPromise = 
                    $.Deferred((w) => {
                        var el = $(vm.$el).children('.m-navbar-container')[0];
                        vm.$scrollbar = Scrollbar.init(el, {
                            alwaysShowTracks: false
                        });
                        w.resolve();
                    }).promise()
                );
            }
        },
        extendViewer() {
            var vm = this;
            $(vm.$viewer.canvas)
            .click(function(e) {
                if (e.target == this) {
                    vm.$emit('viewerHide');    
                }
            });
            
           var $toolbar = $(vm.$viewer.toolbar).children('ul')
           .on('click', '[data-vm-action]', function(e) {
                var $btn = $(this);
                var action = $btn.data('vm-action').split('.');
                var name = action[0], arg = action[1];
                switch (name) {
                    case "hide":
                        vm.$emit('viewerHide');
                        break;
                    case "center":
                        console.log(vm.$viewer.options.transition);
                        vm.centerizeImage();
                        break;
                    case "resize":
                        if (vm.sizeMode == arg) {
                            vm.resize();
                            vm.centerizeImage();
                        } else {
                            vm.sizeMode = arg;
                            $btn
                                .siblings('.active').removeClass('active')
                                .end()
                                .addClass('active');
                        }
                        break;
                    case "toShowExtend":
                        vm.showExtend = true;
                        break;
                    default:
                        console.log('unknown action', action);
                        break;
                }
            });
            $(vm.$el)
                .find('.viewer-extend')
                .children().clone()
                .filter(function() {return $(this).data('prepend') || 'prepend' in $(this).data();})
                .prependTo($toolbar)
                .end().end()
                .filter(function() {return !($(this).data('prepend') || 'prepend' in $(this).data());})
                .appendTo($toolbar);
            var titleMap = {
                'zoom-in': '缩小', 'zoom-out': '放大',
                "one-to-one": '原始大小', "reset": '重置',
                "prev": '上一张', "next": '下一张',
                "play": '幻灯片',
                "rotate-left": '向左旋转90度', "rotate-right": '向右旋转90度',
                "flip-horizontal": '水平镜像', "flip-vertical": '垂直镜像'
            };
            $toolbar.children().filter(x => !x.title)
            .each(function() {
                var name = $(this).data('viewer-action');
                if (name in titleMap) {
                    $(this).attr('title', titleMap[name]);
                }
            })
            .tooltip();
        },
        
        bindImageLoadFail(image) {
            var vm = this;
            var $image = $(image),
                original = $image.data('original'),
                cur = $image.attr('src');
            $image
            .on('error', function() {
                if (original != cur) {
                    $image
                        .data('isThumb', false)
                        .attr('src', original);
                } else {
                    vm.loadFail();    
                }
            })
            .on('load', function(e) {
                if (!$image.parent().length) {
                    return;
                }
                if (!$image.data('isThumb')) {
                    $image.removeClass('blurImg');
                    var {naturalWidth, naturalHeight} = image;
                    $.extend(vm.$viewer.imageData, {naturalWidth, naturalHeight});
                    $.extend(vm.$viewer.initialImageData, {naturalWidth, naturalHeight});
                    var size = sizeMethods[vm.sizeMode](vm.$viewer.viewerData, vm.$viewer.imageData);
                    $.extend(vm.$viewer.imageData, size);
                    $.extend(vm.$viewer.initialImageData, size);
                    var {viewerData, imageData} = vm.$viewer;
                    var left = (viewerData.width - imageData.width) / 2,
                        top = (viewerData.height - imageData.height) / 2;
                    $.extend(vm.$viewer.imageData, {top, left});
                    $.extend(vm.$viewer.initialImageData, {top, left});

                    var arr = _.compact(
                        _.concat.apply(_,
                            _.zip(
                                vm.images.slice(Math.max(vm.curIndex - vm.preload, 0), vm.curIndex).reverse(),
                                vm.images.slice(vm.curIndex + 1, vm.curIndex + vm.preload + 1)
                            )
                        )
                    ).map(x => x.baseInfo.src + '?size=' + Math.max(640, window.innerWidth));

                    vm.preloader.replace(arr);
                } else {
                    $image.addClass('blurImg');
                    $image
                        .data('isThumb', false)
                        .attr('src', original + '?size=' + Math.max(640, window.innerWidth));
                    
                }
                
                e.detail = {image};
                vm.loadDone(e);
                $image.addClass('resized');
            })
            .data('binded', true);
        },
        startLoad({detail: {image, originalImage, index}}) {
            console.log('startLoad', image.src);
            var vm = this, $image = $(image);
            var obj = vm.imageDB[originalImage.dataset.id];

            vm.state.loaded = false;
            vm.state.error = false;
            vm.curIndex = index;

            vm.$viewer.options.transition = false;
            
            $image
            .data('isThumb', true)
            .data('original', $(originalImage).data('original'));
            

            vm.bindImageLoadFail(image);
            vm.focusNavBarItem(index);
        },
        loadDone({ detail:{image} }) {
            var vm = this, $image = $(image);
            vm.state.loaded = true;
            vm.state.error = false;
            vm.$viewer.options.transition = true;
            vm.resize();
            vm.centerizeImage();
            if (!$image.data('isThumb')) {
                setTimeout(function() {
                    $image.addClass('viewer-transition');    
                }, 300);
            }
            
        },
        loadFail() {
            var vm = this;
            vm.state.loaded = false;
            vm.state.error = true;
        },
        centerizeImage() {
            var vm = this;
            if (!vm.state.loaded) {
                return;
            }
            var {viewerData, imageData} = vm.$viewer;
            var left = (viewerData.width - imageData.width) / 2,
                top = (viewerData.height - imageData.height) / 2;
            vm.$viewer.moveTo(left, top);
        },
        resize(selfSize) {
            var vm = this;
            if (!vm.state.loaded && !selfSize) {
                return;
            }
            var curSize = selfSize && vm.curImage ? {
                naturalWidth: vm.curImage.baseInfo.width,
                naturalHeight: vm.curImage.baseInfo.height
            } : vm.$viewer.imageData;
            var sizeData = sizeMethods[vm.sizeMode](vm.$viewer.viewerData, curSize);
            vm.$viewer.zoomTo(sizeData.ratio);
        }
        
    },
    watch:{
        index(v) {
            var vm = this;
            vm.view(v);
        },
        sizeMode(v) {
            var vm = this;
            vm.resize();
            vm.centerizeImage();
        },
        isExtendInfoFixed(v) {
            var vm = this;
            setTimeout(function() {
                vm.$viewer.resize();
                vm.resize();
                vm.centerizeImage();
            }, 500);
        }
    },
    mounted() {
        var vm = this;
        vm.scrollbarInitPromise = null;
        vm.initScrollBar();
        Scrollbar.init(vm.$el.querySelector('.extend-info-container .content'));
    },
    destroyed() {
        var vm = this;
        Scrollbar.destroy($(vm.$el).children('.m-navbar-container')[0]);
        Scrollbar.destroy(this.$el.querySelector('.extend-info-container .content'));
    },
    updated() {
        var vm = this;
    }
}
</script>

<style type="text/css">
    .blurImg {
        filter: blur(10px);
    }
    .image-viewer.show {
        opacity: 1;
        z-index: 1016;
        -webkit-transition: z-index 0s, opacity .3s, margin-left .5s;

           -moz-transition: z-index 0s, opacity .3s, margin-left .5s;

            -ms-transition: z-index 0s, opacity .3s, margin-left .5s;

             -o-transition: z-index 0s, opacity .3s, margin-left .5s;

                transition: z-index 0s, opacity .3s, margin-left .5s;

    }
    .image-viewer {
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0;
        width: auto;
        margin-right: auto;
        right: 0;
        height: 100%;
        z-index: -1;
        -webkit-transition: z-index 0s .5s, opacity .3s, margin-left .5s;
           -moz-transition: z-index 0s .5s, opacity .3s, margin-left .5s;
            -ms-transition: z-index 0s .5s, opacity .3s, margin-left .5s;
             -o-transition: z-index 0s .5s, opacity .3s, margin-left .5s;
                transition: z-index 0s .5s, opacity .3s, margin-left .5s;
    }

    .image-viewer>.m-navbar-container {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 4;
        text-align: center;
        -webkit-transition: transform .5s;
        -moz-transition: transform .5s;
        -ms-transition: transform .5s;
        -o-transition: transform .5s;
        transition: transform .5s;
        user-select: none;
        transition-delay: .5s;
        
    }

    .image-viewer.show>.m-navbar-container {
        -webkit-transform: translateY(-100%);
           -moz-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
             -o-transform: translateY(-100%);
                transform: translateY(-100%);
                transition-delay: 1s;
    }

    .image-viewer>.m-navbar-container:hover,
    .image-viewer>.nav-bar-trigger:hover+.m-navbar-container {
        -webkit-transform: translateY(0);
           -moz-transform: translateY(0);
            -ms-transform: translateY(0);
             -o-transform: translateY(0);
                transform: translateY(0);
        transition-delay: 0s;
    }

    .image-viewer>.nav-bar-trigger {
        position: absolute;
        height: 60px;
        width: 100%;
        top: 0;
        left: 0;
        background: transparent;
        z-index: 3;
    }

    .image-viewer .m-navbar {
        display: inline-block;
        white-space: nowrap;
        padding: 8px;
    }
    .image-viewer .m-navbar>.item {
        display: inline-block;
        overflow: hidden;
        vertical-align: middle;
        box-shadow: 1px 1px 5px #c6c4c4;
        border-radius: 5px;
    }
    .image-viewer .m-navbar>.item.active {
        box-shadow: 0px 0px 5px 2px #FFC107;
    }
    .image-viewer .m-navbar>.item+.item {
        margin-left: 5px;
    }
    
    .image-viewer>.m-navbar-container>.scroll-content:hover+.scrollbar-track-x {
        opacity: 1;
    }

    .image-viewer>.m-navbar-container>.scrollbar-track-x {
        cursor: pointer;
        transition-delay: 0s;
    }

    .image-viewer>.viewer-container>.viewer-footer {
        -webkit-transition: transform .5s;
           -moz-transition: transform .5s;
            -ms-transition: transform .5s;
             -o-transition: transform .5s;
                transition: transform .5s;
        overflow: visible;
        transition-delay: .5s;
    }

    .image-viewer.show>.viewer-container>.viewer-footer {
        -webkit-transform: translateY(100%);
           -moz-transform: translateY(100%);
            -ms-transform: translateY(100%);
             -o-transform: translateY(100%);
                transform: translateY(100%);
        transition-delay: 1s;
    }

    .image-viewer.show>.viewer-container>.viewer-footer:hover {
        -webkit-transform: translateY(0);
           -moz-transform: translateY(0);
            -ms-transform: translateY(0);
             -o-transform: translateY(0);
                transform: translateY(0);
                transition-delay: 0s;
    }

    .image-viewer.show>.viewer-container>.viewer-footer:hover::before {
        height: 0;
        transition-delay: .5s;
    }

    .image-viewer>.viewer-container>.viewer-footer::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 0;
        top: -100%;
        left: 0;
    }

    .image-viewer.show>.viewer-container>.viewer-footer::before {
        -webkit-transition: height 0s;
           -moz-transition: height 0s;
            -ms-transition: height 0s;
             -o-transition: height 0s;
                transition: height 0s;
        height: 100%;
        transition-delay: 1.5s;
    }

    .image-viewer.img-error .viewer-canvas img {
        opacity: 0;
    }
    
    @keyframes fadeout {
        0% {
            opacity: 0;
            color: rgb(127,127,127);
        }
        25% {
            opacity: 1;
            color: #cbcbcb;
        }
        75% {
            opacity: 1;
            color: #cbcbcb;
        }
        100% {
            opacity: 0;
            color: rgb(127,127,127);
        }
    }

    .image-viewer.img-error .viewer-canvas::before {
        content: "加载失败";
        -webkit-animation: fadeout 2s both;
        -o-animation: fadeout 2s both;
        animation: fadeout 2s both;
        display: inline-block;
        position: absolute;
        text-align: center;
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #cbcbcb;
        top: 50%;
        left: 0;
        margin-top: -60px;
        font-size: 20px;
        z-index: 2;
    }

    .image-viewer.img-error .viewer-canvas::after {
        animation: none;
        border: 4px solid rgb(255, 0, 0, 0.5);
        border-left-color: rgba(255, 0, 0, 0.5);
    }

    .image-viewer .viewer-container .viewer-player {
        z-index: 3;
    }

    .image-viewer>.viewer-container>.viewer-fullscreen {
        display: none;
    }

</style>

<style type="text/css">

    .image-viewer .extend-info-container {
        width: 20rem;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        box-shadow: -13px 0 25px 5px #ffffff;
        background: rgba(226, 223, 223, 0.89);
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
                transition: transform .5s;
    }

    .image-viewer.extend-info-fixed {
        margin-left: 20rem;
    }

    .image-viewer:not(.extend-info-show) .extend-info-container {
        border: none;
    }
    
    .image-viewer:not(.extend-info-show) .extend-info-container,
    .image-viewer.extend-info-fixed .extend-info-container {
        border-left: 1px solid #eee;
        box-shadow: none;
        -webkit-transform: translateX(-100%);
           -moz-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
             -o-transform: translateX(-100%);
                transform: translateX(-100%);
            
    }

    .image-viewer .viewer-canvas img:not(.resized) {
        opacity: 0;
    }
</style>

<style type="text/css">
    .viewer-extend-btn [class*=icon] {
      width: auto;
      height: 1em; /* 或任意其它字体大小相对值 */

      /* 要在 Safari 中正常工作，需要再引入如下两行代码 */
      max-width: 100%;
      max-height: 100%;

      font-size: 1em;
      vertical-align: middle;
    }
    .viewer-extend-btn::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        width: 0px;
        margin: 0;
    }
    .viewer-extend-btn {
        font-size: 12px;
        color: white;
    }
    .viewer-extend-btn.active,
    .viewer-extend-btn.active:hover {
        background: #17a2b8;
    }
    .viewer-toolbar > ul > li[class*=divider] {
        border-radius: 0;
        width: 0;
        margin: 0 8px;
        border-left: 2px solid #666;
        cursor: none;
    }
</style>